<template>
    <!-- 二维码登入 -->
    <div class="box3">
        <h1 class="h1">微信扫码登入</h1>
        <div class="sao" v-loading="load" width="200px">
            <img :src="qrImg" alt="">
            <i class="mask" v-if="showlod" :style="maskBg" @click="updateqr"></i>
        </div>
        <div class="th">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shouye1"></use>
            </svg>
            <b class="b" @click="$emit('changeSmsType')">切换短信登入</b>
        </div>
    </div>
</template>
<script>
//引入socket.io
import socketIo from 'socket.io-client'
//引入qrcode
import qrcode from 'qrcode'
import * as api from '../../api/login'
//引入成功失败扫码遮罩图片
import invalidImg from "../../assets/img/invalidQr.png"
import scancodeImg from "../../assets/img/scancode.png"
import storage from '@/utils/storage'

export default {
    props: {
        storeageUserInfo: {
             required: true
        }
    },
    data() {
        return {
            //二维码图片
            qrImg: "",
            //是否显示遮罩
            showlod: false,
            //遮罩背景样式
            maskBg: { backgroundImage: `url(${scancodeImg})` },
            //动画
            load: true
        }
    },
    created() {
        // console.log(this.storeageUserInfo);
        //建立socket连接
        let io = socketIo('wss://chst.vip')
        //监听连接的事件
        io.on('connectSuccess', ({ sid }) => {
            //将sid存到本地
            storage.set('qf-sid', sid)
            this.getQrUrl(sid)
        })
        //无效二维码
        io.on("invalidCode", data => {
            // console.log(data); 
            //展示遮罩
            this.showlod = true
            //显示无效的二维码样式
            this.maskBg.backgroundImage = `url(${invalidImg})`
        })
        //扫码成功
        io.on('scancodeSuccess', async ({state,wechatCode,msg}) => {
            // console.log(wechatCode);
            //显示遮罩
            this.showlod = true
            //展示成功的样式
            this.maskBg.backgroundImage = `url(${scancodeImg})`
            if(state){
                //调用微信登入接口
                 let res = await api.wechatLoginApi(wechatCode)
                 console.log(res);
                 //扫码成功将内容存到本地
                 this.storeageUserInfo(res.data)
                 //跳转页面
                 this.$router.push('/')
            }else{
                console.error(msg);
            }
        })
    },
    methods: {
        async getQrUrl(sid) {
            //打开加载动画
            this.load = true
            //请求获取二维码地址
            let res = await api.getQrCodeApi(sid)
            // console.log(res);
            let { scanCodeUrl: qrcodeUrl } = res.data
            //通过qrcode插件，生成二维码
            qrcode.toDataURL(qrcodeUrl, (err, img) => {
                if (err) {
                    throw err
                }
                // console.log(img);
                this.qrImg = img
                //关掉遮罩
                this.showlod = false
                //关掉动画
                this.load = false
            })
        },
        //点击更新事件处理函数
        updateqr() {
            //获取本地存储的sid
            let sid = storage.get('qf-sid')
            this.getQrUrl(sid)

        }
    }
}

</script>
<style scoped lang="less">
/deep/ .el-loading-mask{
    width: 260px;
    height: 260px;
}
.icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    margin-right: 4px;
}

.box3 {
    width: 400px;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 100px;
    left: 200px;
    overflow: hidden;
}

.h1 {
    color: aliceblue;
    margin: 36px 0 30px 100px;
}

.th {
    color: aliceblue;
    margin-left: 146px;
    display: flex;
    .b{
        cursor: pointer;
    }
}

.box3 .sao {
    display: inline-block;
    position: relative;
    background-color: aliceblue;
    width: 200px;
    height: 200px;
    margin: 0px 0 80px 80px;

    img {
        position: absolute;
        left: 0;
    }

    .mask {
        width: 260px;
        height: 260px;
        opacity: 0.8;
        background-color: #fff;
        position: absolute;
        left: 0;
        // background-image: url("../../assets/img/scancode.png");
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }
}
</style>